<template>
	<view class="custom-content">
			<uni-card :is-shadow="false" style="width: 100%;padding:0;border-radius: 20.5rpx;margin: 15px 15px 0;">
				<view class="form-cell">
					<image src="/static/images/room-image-demo.png" mode="aspectFit" style="width: 187rpx;height:116rpx;"></image>
					<view class="room-info">
						<view class="room-name">Living Room</view>
						<view class="room-id">ID 6049305435</view>
					</view>
					<image src="/static/images/icons/arrow-right.png" mode="aspectFit" style="width: 58.5rpx;height:58.5rpx;"></image>
				</view>
			</uni-card>

			<uni-card :is-shadow="false" style="width: 100%;padding:0;border-radius: 20.5rpx;margin: 10px 15px 0;">
				<view class="form-cell">
					<view class="form-cell-title">Message reminder</view>
					<view class="form-cell-value"><switch  color="#FE0000" :checked="messageValue" @change="switch1Change"/></view>
				</view>
			</uni-card>

			<uni-card :is-shadow="false" style="width: 100%;padding:0;border-radius: 20.5rpx;margin: 10px 15px 0;">
				<view class="form-cell">
					<view class="form-cell-title">Camera alarm</view>
					<view class="form-cell-value"><switch  color="#FE0000" :checked="cameraValue" @change="switch2Change"/></view>
				</view>
			</uni-card>

			<uni-card :is-shadow="false" style="width: 100%;padding:0;border-radius: 20.5rpx;margin: 10px 15px 0;">
				<view class="form-cell">
					<view class="form-cell-title">SD card recording</view>
					<view class="form-cell-value"><switch  color="#FE0000" :checked="sdCardValue" @change="switch3Change"/></view>
				</view>
			</uni-card>


			<uni-card :is-shadow="false" style="width: 100%;padding:0;border-radius: 20.5rpx;margin: 10px 15px 0;">
				<view class="form-cell" style="height: 88rpx">
					<view class="form-cell-title">WIFI network </view>
					<image src="/static/images/icons/arrow-right.png" mode="aspectFit" style="width: 58.5rpx;height:58.5rpx;"></image>
				</view>
				<view class="form-cell" style="height: 88rpx;margin-top: 24rpx;">
					<view class="form-cell-title">Set device password</view>
					<image src="/static/images/icons/arrow-right.png" mode="aspectFit" style="width: 58.5rpx;height:58.5rpx;"></image>
				</view>
			</uni-card>
			
			<uni-card :is-shadow="false" style="width: 100%;padding:0;border-radius: 20.5rpx;margin: 10px 15px 0;">
				<picker :value="sendingSettingIndex" :range="sendingSetting" @change="onSetting1Change" style="margin-top: 0rpx;" >
					<view class="form-cell" style="height: 88rpx" >
						<view class="form-cell-title">Sending Setting</view>
						<view class="form-cell-value">{{sendingSetting[sendingSettingIndex]}}</view>
						<image src="/static/images/icons/arrow-right.png" mode="aspectFit" style="width: 58.5rpx;height:58.5rpx;"></image>
					</view>
				</picker>
				<picker :value="comminicationSettingIndex" :range="comminicationSetting" @change="onSetting2Change" style="margin-top: 24rpx;" >
					<view class="form-cell" style="height: 88rpx" >
						<view class="form-cell-title">Comminication Setting</view>
						<view class="form-cell-value">{{comminicationSetting[comminicationSettingIndex]}}</view>
						<image src="/static/images/icons/arrow-right.png" mode="aspectFit" style="width: 58.5rpx;height:58.5rpx;"></image>
					</view>
				</picker>
				<view class="form-cell" style="margin-top: 24rpx;">
					<view class="form-cell-title">GPIO(EX DEVİCE CONTROL)</view>
					<view class="form-cell-value"><switch  color="#FE0000" :checked="GPIOValue" @change="switch4Change"/></view>
				</view>
			</uni-card>
			
			
			<view style="position: relative;margin: 155rpx 0;width: 105.72rpx;height: 105.72rpx;background: #FFFFFF;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
				<image src="/static/images/icons/delete.png" mode="aspectFit" style="width: 58.5rpx;height:58.5rpx;"></image>
			</view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue'

const messageValue = ref(true)
const cameraValue = ref(false)
const sdCardValue = ref(false)
const GPIOValue = ref(false)
const sendingSetting = ref(['SMTP','FTP','CLOUD'])
const sendingSettingIndex = ref(0);
const comminicationSetting = ref(['Satalite','4G','WIFI','RF','LAN'])
const comminicationSettingIndex = ref(0);



const switch1Change = (e) => {
	messageValue.value = e.detail.value
}

const switch2Change = (e) => {
	cameraValue.value = e.detail.value
}

const switch3Change = (e) => {
	sdCardValue.value = e.detail.value
}

const switch4Change = (e) => {
	GPIOValue.value = e.detail.value
}

const onSetting1Change = (e) => {
	sendingSettingIndex.value = e.detail.value
}

const onSetting2Change = (e) => {
	comminicationSettingIndex.value = e.detail.value
}

</script>
<style lang="scss" scoped>
	.custom-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 24.5rpx;
	}
	.form-cell {
		width: 100%;
		padding: 4rpx 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		.form-cell-value{
			flex: 1;
			text-align: right;
		}
	}
	.room-info {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		flex:1;
		height: 116rpx;
		justify-content: space-around;
	}
	.room-name {
		font-size: 28rpx;
		color: #37343B;
	}
	.room-id {
		font-size: 24rpx;
		color: #898989;
	}
	.popup-wrap{
		width: 100%;
		height: 580rpx;
		background-color: #fff;
		border-radius:10px 10px 0 0;
	}
</style>
